<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      #box {
        width: 300px;
        height: 300px;
        background: red;
        display: flex;
        position: absolute;
        right: 50px;
        top: 100px;
      }
      #box p {
        width: 250px;
        height: 300px;
        font-size: 24px;
        text-indent: 2em;
      }
      body > p {
        font-size: 32px;
        text-align: center;
      }
      span {
        display: block;
        width: 50px;
        height: 300px;
        background: green;
        font-size: 40px;
        cursor: pointer;
      }
    </style>
    <script src="startMove.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div id="box">
      <span id="span1">侧边栏=》</span>
      <p>哈迪斯撒娇是的撒旦很骄傲和打电话嘎嘎的撒旦很骄傲和打电话嘎嘎的撒旦很骄傲和打电话嘎嘎的撒旦很骄傲和打电话嘎嘎打火锅的萨达化</p>
    </div>
    <p id="pp1">上课不要睡觉，好好学习</p>
    <script type="text/javascript">
      var Pp1 = document.getElementById('pp1')
      for (let i = 0; i <= 40; i++) {
        var p1 = Pp1.cloneNode()
        var text1 = document.createTextNode('上课不要睡觉，好好学习')
        p1.appendChild(text1)
        document.body.appendChild(p1)
      }

      var oSpan = document.getElementById('span1')
      var oBox = document.getElementById('box')
      window.onscroll = function () {
        var Scroll = document.documentElement.scrollTop || document.body.scrollTop
        var cH = document.documentElement.clientHeight
        var tag = Math.floor((cH - oBox.offsetHeight) / 2) + Scroll
        startMove(oBox, { top: tag })
      }
    </script>
    <script>
      var timer = null
      function startMove(obj, json, fn) {
        clearInterval(timer)
        timer = setInterval(function () {
          var flag = true //假设全部为真
          for (let attr in json) {
            //遍历对象
            if (attr == 'opacity') {
              var cur1 = parseInt(getStyle(obj, 'opacity') * 100)
            } else {
              var cur1 = parseInt(getStyle(obj, attr))
            }

            target1 = json[attr]
            speed = (target1 - cur1) / 6 //减速运动
            var speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed) //判断speed的正负值
            if (attr == 'opacity') {
              obj.style.opacity = (cur1 + speed) / 100
              obj.style.filter = 'alpha(opacity=' + (cur1 + speed) + ')'
            } else {
              obj.style[attr] = cur1 + speed + 'px'
            }
            //console.log(cur1)
            if (target1 != cur1) {
              //判断若有一处未完成 ，flag为假
              flag = false
            }
          }
          if (flag) {
            clearInterval(timer)
            if (fn) {
              fn()
            }
          }
        }, 30)
      }
      function getStyle(obj, attr) {
        if (obj.currentStyle) {
          //支持IE
          return obj.currentStyle[attr]
        } else {
          //不支持IE
          return getComputedStyle(obj, null)[attr]
        }
      }
    </script>
  </body>
</html>
